<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"> 
        <style>
            body{padding:20px;}
            #container{
                border:solid 1px #ccc;
                margin-top: 10px;
                width:350px;
                height:350px;
            }
        </style>
    </head>
    <body>
        <h4>Double-Click to create text.<br>Drag text xxx.</h4>
        <div id="container"></div>
        <span id="mousemove"></span>
        <img id="canvasImg"/>
        <button id="save">
            Save as image
        </button>



        <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
        <script defer="defer">
            stage = new Kinetic.Stage({
                container: 'container',
                width: 350,
                height: 350
            });
            var layer = new Kinetic.Layer();
            var imageObj = new Image();
            imageObj.onload = function () {
                var yoda = new Kinetic.Image({
                    x: 200,
                    y: 50,
                    image: imageObj,
                    width: 106,
                    height: 118
                });

                // add the shape to the layer
                layer.add(yoda);

                // add the layer to the stage
                stage.add(layer);
            };
            imageObj.src = '/CardWeb/resources/images/0ba5c.jpg';

            //stage.add(layer);

//            $(stage.getContent()).on('dblclick', function (event) {
//                var mouseX = parseInt(event.clientX);
//                var mouseY = parseInt(event.clientY);
//                var text = new Kinetic.Text({
//                    x: mouseX,
//                    y: mouseY,
//                    text: "ทดสอบ",
//                    fill: "blue",
//                    fontSize: 30,
//                    fontFamily: 'Tahoma',
//                    draggable: true,
//                });
//                layer.add(text);
//                layer.draw();
//            });

            var text = new Kinetic.Text({
                x: 75,
                y: 220,
                text: "ทดสอบ ",
                fill: "blue",
                fontSize: 30,
                fontFamily: 'Tahoma',
                draggable: true,
            });




            layer.add(text);
            layer.draw();

            document.getElementById('save').addEventListener('click', function () {
                /*
                 * since the stage toDataURL() method is asynchronous, we need
                 * to provide a callback
                 */
                //window.open(stage.toDataURL());
                stage.toDataURL({
                    callback: function (dataUrl) {
                        window.open(dataUrl);
                        document.getElementById("canvasImg").src = dataUrl;
                    }
                });
            }, false);
        </script>
    </body>
</html>      